<script setup>
import { color } from "echarts";
import { ref } from "vue";

const option = ref({
  title: {
    text: "文化传承与跨领域影响路径",
    // subtext: "思想·艺术·科技·制度多维演进可视化",副标题
    left: "center",
    textStyle: {
      fontSize: 24,
      color: "#2c3e50",
    },
  },
  tooltip: {
    trigger: "item",
    formatter: "{b} → {c}",
  },
  series: [
    {
      top: 50,
      right: 80,
      type: "sankey",
      layout: "none",
      nodeGap: 12,
      nodeWidth: 18,
      draggable: false,
      emphasis: {
        focus: "adjacency",
        label: { show: true },
      },
      lineStyle: {
        // curveness: 0.25,
        // opacity: 0.2,
      },
      data: [
        // 思想哲学（深蓝系）
        { name: "周易", itemStyle: { color: "#1A237E" } },
        { name: "儒家", itemStyle: { color: "#283593" } },
        { name: "道家", itemStyle: { color: "#303F9F" } },
        { name: "法家", itemStyle: { color: "#3949AB" } },
        { name: "程朱理学", itemStyle: { color: "#3F51B5" } },
        { name: "陆王心学", itemStyle: { color: "#5C6BC0" } },

        // 文学艺术（绿色系）
        { name: "诗经", itemStyle: { color: "#2E7D32" } },
        { name: "楚辞", itemStyle: { color: "#388E3C" } },
        { name: "汉赋", itemStyle: { color: "#43A047" } },
        { name: "唐诗", itemStyle: { color: "#4CAF50" } },
        { name: "宋词", itemStyle: { color: "#66BB6A" } },
        { name: "元曲", itemStyle: { color: "#81C784" } },

        // 科学技术（红色系）
        { name: "四大发明", itemStyle: { color: "#C62828" } },
        { name: "天工开物", itemStyle: { color: "#D32F2F" } },
        { name: "九章算术", itemStyle: { color: "#E53935" } },
        { name: "水经注", itemStyle: { color: "#EF5350" } },
        { name: "农政全书", itemStyle: { color: "#EF9A9A" } },

        // 建筑艺术（紫色系）
        { name: "斗拱结构", itemStyle: { color: "#6A1B9A" } },
        { name: "故宫建筑群", itemStyle: { color: "#8E24AA" } },
        { name: "苏州园林", itemStyle: { color: "#9C27B0" } },
        { name: "应县木塔", itemStyle: { color: "#AB47BC" } },

        // 医学传承（金色系）
        { name: "黄帝内经", itemStyle: { color: "#FFD600" } },
        { name: "伤寒杂病论", itemStyle: { color: "#FFE082" } },
        { name: "千金方", itemStyle: { color: "#FFF176" } },
        { name: "本草纲目", itemStyle: { color: "#FFEE58" } },

        // 更多节点...
        { name: "科举制度", itemStyle: { color: "#1565C0" } },
        { name: "茶马古道", itemStyle: { color: "#4DB6AC" } },
        { name: "海上丝绸之路", itemStyle: { color: "#81D4FA" } },
        { name: "敦煌莫高窟", itemStyle: { color: "#FFB74D" } },
      ],
      links: [
        // 思想传承链
        { source: "周易", target: "儒家", value: 15 },
        { source: "儒家", target: "科举制度", value: 12 },
        { source: "儒家", target: "程朱理学", value: 10 },
        { source: "道家", target: "陆王心学", value: 8 },

        // 文学发展线
        { source: "诗经", target: "唐诗", value: 18 },
        { source: "楚辞", target: "汉赋", value: 14 },
        { source: "唐诗", target: "宋词", value: 16 },
        { source: "宋词", target: "元曲", value: 12 },

        // 科技传播
        { source: "四大发明", target: "海上丝绸之路", value: 25 },
        { source: "天工开物", target: "农政全书", value: 10 },
        { source: "九章算术", target: "水经注", value: 8 },

        // 建筑技术
        { source: "斗拱结构", target: "应县木塔", value: 20 },
        { source: "苏州园林", target: "故宫建筑群", value: 15 },

        // 医学发展
        { source: "黄帝内经", target: "伤寒杂病论", value: 18 },
        { source: "千金方", target: "本草纲目", value: 12 },

        // 文化交融
        { source: "茶马古道", target: "敦煌莫高窟", value: 10 },

        // 更多连接关系...
        { source: "科举制度", target: "程朱理学", value: 9 },
        { source: "陆王心学", target: "农政全书", value: 7 },
        { source: "敦煌莫高窟", target: "元曲", value: 6 },
        { source: "水经注", target: "苏州园林", value: 8 },
      ],
    },
  ],
  // visualMap: {
  //   type: "piecewise",
  //   categories: [
  //     "思想哲学",
  //     "文学艺术",
  //     "科学技术",
  //     "建筑工艺",
  //     "医学传承",
  //     "制度文化",
  //   ],
  //   dimension: 0,
  //   inRange: {
  //     color: ["#1A237E", "#2E7D32", "#C62828", "#6A1B9A", "#FFD600", "#1565C0"],
  //   },
  //   top: 50,
  //   right: 20,
  // },
});
</script>

<template>
  <!-- 优秀文化的桑基图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
